<!DOCTYPE html>
<html>
<head>
    <title>我的数据</title>
<#include "/common/include_header.ftl">
</head>
<body>

<#include "/common/include_top.ftl">

<div class="layui-container fly-marginTop fly-user-main">

<#include "/common/include_menu.ftl">

    <div class="site-tree-mobile layui-hide">
        <i class="layui-icon">&#xe602;</i>
    </div>
    <div class="site-mobile-shade"></div>

    <div class="site-tree-mobile layui-hide">
        <i class="layui-icon">&#xe602;</i>
    </div>
    <div class="site-mobile-shade"></div>


    <div class="fly-panel fly-panel-user" pad20>


        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
            <legend>${dataInfo.title}</legend>
        <#--${dataInfo.createTime}-->
        </fieldset>

        <table class="layui-table" lay-skin="line">
            <colgroup>
            <#--<col >-->
            <#--<col width="200">-->
                <col width="150">
                <col>
                <col>
                <col>
            </colgroup>
            <thead>
            <#--<tr>-->
                <#--<th>昵称</th>-->
                <#--<th>加入时间</th>-->
                <#--<th>签名</th>-->
            <#--</tr>-->
            </thead>
            <tbody>
            <tr style="background-color:#5FB878;">
                <td><b>交互</b></td>
                <td>${dataInfo.readNum} 阅读</td>
                <td>${dataInfo.likeNum} 喜欢</td>
                <td>${dataInfo.collectNum} 收藏</td>
            </tr>
            <tr>
                <td><b>文档描述</b></td>
                <td colspan="3">${dataInfo.intro}</td>
            </tr>
            </tbody>
        </table>

        <br>
        <br>


        <script>
            function addColumn(num) {
                $.ajax({
                <#--url: '${basePath}/data/doSave',-->
                    url: '/data/${dataInfo.id}/addColumn',
                    type: 'post',
                    dataType: 'json',
                    data: {
                        num: num
                    },
                    success: function (rd) {
                        if (rd.suc) {
                            window.location.href = "${basePath}/data/${dataInfo.id}/info";
                        } else {
                            layer.msg(rd.msg, {icon: 2});
                        }
                    }
                });
            }


            function addColumnBtn() {
                var num = $("#addColumnNum").val();
                if (isNull(num)) {
                    layer.msg("数据为空", {icon: 2});
                } else if (isNaN(num)) {
                    layer.msg("请输入数字", {icon: 2});
                } else if (num > 10) {
                    layer.msg("请不要太贪心哦", {icon: 2});
                } else {
                    addColumn(num);
                }
            }
        </script>








    <#if dataInfo.type == 0 >


    <#--<fieldset class="layui-elem-field site-demo-button">-->
    <#--<legend>操作</legend>-->
        <div class="layui-btn-group">
        <#--<button class="layui-btn" >获取选中行数据</button>-->
                <#--<button class="layui-btn" data-type="getCheckLength">获取选中数目</button>-->
        </div>
        <div class="layui-btn-group demoTable">
            <button data-type="getCheckData" class="layui-btn layui-btn-sm">删除选中行</button>
        <#--<button class="layui-btn layui-btn-sm"><i class="layui-icon"></i></button>-->
        <#--<button class="layui-btn layui-btn-sm"><i class="layui-icon"></i></button>-->
        <#--<button class="layui-btn layui-btn-sm"><i class="layui-icon"></i></button>-->
        </div>
        <div class="layui-btn-group">
            <button onclick="addColumn(1)" class="layui-btn layui-btn-sm">添加1行</button>
            <button onclick="addColumn(5)" class="layui-btn layui-btn-sm">添加5行</button>
        </div>
        <div class="layui-btn-group">
            <button class="layui-btn layui-btn-primary layui-btn-sm">添加行数</button>
            <button class="layui-btn layui-btn-primary layui-btn-sm">
                <input id="addColumnNum" style="border:0px; width: 24px;font-size: large;" type="text">
            </button>
            <button onclick="addColumnBtn()" class="layui-btn layui-btn-primary layui-btn-sm"><i
                    class="layui-icon"></i></button>
        </div>
        <div class="layui-btn-group">
            <a href="/data/${dataInfo.id}/update">
                <button class="layui-btn layui-btn-sm layui-btn-normal">编辑基本信息</button>
            </a>
        </div>



        <br>
        <br>
        <br>





        <div class="layui-btn-group">
            <button class="layui-btn layui-btn-warm" onclick="chengeName(0, '${dataInfo.columnName}')"> ${dataInfo.columnName}</button>
            <button class="layui-btn layui-btn-warm" onclick="chengeName(1, '${dataInfo.valueAName}')" >${dataInfo.valueAName}</button>
            <button class="layui-btn layui-btn-warm" onclick="chengeName(2, '${dataInfo.valueBName}')" >${dataInfo.valueBName}</button>
            <button class="layui-btn layui-btn-warm" onclick="chengeName(3, '${dataInfo.valueCName}')" >${dataInfo.valueCName}</button>
            <button class="layui-btn layui-btn-warm" onclick="chengeName(4, '${dataInfo.valueDName}')" >${dataInfo.valueDName}</button>
            <button class="layui-btn layui-btn-warm" onclick="chengeName(5, '${dataInfo.valueEName}')" >${dataInfo.valueEName}</button>
        </div>






        <br>
    <#--</fieldset>-->


    <#--<table class="layui-table" lay-data="{url:'www.layui.com/test/table/demo1.json', id:'test3'}" lay-filter="test3">-->
    <#--<table class="layui-table" lay-data="{url:'/static/res/json/demo.json', id:'test3'}" lay-filter="test3">-->
    <#--<table id="tableData" class="layui-table" lay-data="{url:'/static/res/json/data1.json', id:'tableData'}" lay-filter="tableData">-->
        <table id="tableData" class="layui-table" lay-data="{url:'/json/data/${dataInfo.id}/info', id:'tableData'}"
               lay-filter="tableData">


            <thead>

            <tr>
            <#--<th lay-data="{type:'checkbox'}">name2</th>-->
            <#--<th lay-data="{field:'id', width:80, sort: true, edit: 'text'}">id</th>-->
                <th lay-data="{type:'checkbox', fixed: 'left'}"></th>
                <th lay-data="{field:'name', sort: true, edit: 'text'}">   ${dataInfo.columnName}</th>
                <th lay-data="{field:'valueA', edit: 'text', sort: true }">${dataInfo.valueAName}</th>
                <th lay-data="{field:'valueB', edit: 'text', sort: true }">${dataInfo.valueBName}</th>
                <th lay-data="{field:'valueC', edit: 'text', sort: true }">${dataInfo.valueCName}</th>
                <th lay-data="{field:'valueD', edit: 'text', sort: true }">${dataInfo.valueDName}</th>
                <th lay-data="{field:'valueE', edit: 'text', sort: true }">${dataInfo.valueEName}</th>

            </tr>
            </thead>
        </table>
    <#else>



        <br>
        <br>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">json数据</label>
            <div class="layui-input-block">
                <textarea name="des" placeholder="请输入内容" class="layui-textarea">${dataInfo.des}</textarea>
            </div>
        </div>

    </#if>



    <#--<script src="//res.layui.com/layui/dist/layui.js" charset="utf-8"></script>-->
        <script src="/static/js/layui.js"></script>

        <!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
        <script>
            layui.use('table', function () {
                var table = layui.table;

                //监听单元格编辑
                table.on('edit(tableData)', function (obj) {
                    var value = obj.value //得到修改后的值
                            , data = obj.data //得到所在行所有键值
                            , field = obj.field; //得到字段

                    $.ajax({
                    <#--url: '${basePath}/data/doSave',-->
                        url: '/column/update',
                        type: 'post',
                        dataType: 'json',
                        data: {
                            columnId: data.id,
                            field: field,
                            value: value
                        },
                        success: function (rd) {
                            if (rd.suc) {
                                // layer.msg(rd.msg, {icon: 1});
                            } else {
                                layer.msg(rd.msg, {icon: 2});
                            }
                        }
                    });

                    // layer.msg('[ID: ' + data.id + '] ' + field + ' 字段更改为：' + value);
                });

                var $ = layui.$, active = {
                    getCheckData: function () { //获取选中数据
                        var checkStatus = table.checkStatus('tableData')
                                , data = checkStatus.data;
//                        layer.alert(JSON.stringify(data));
//                        layer.alert(data);
                        for (var i = 0; i < data.length; i++) {
                            console.log(data[i].id);

                            $.ajax({
                                url: '${basePath}/column/delete/' + data[i].id,
                                type: 'post',
                                dataType: 'json',
                                success: function (rd) {
                                    if (rd.suc) {
//                                         layer.msg(rd.msg, {icon: 1});
                                        window.location.href = "${basePath}/data/${dataInfo.id}/info";
                                    } else {
                                        layer.msg(rd.msg, {icon: 2});
                                    }
                                }
                            });

                        }


                    }
//                    ,getCheckLength: function(){ //获取选中数目
//                        var checkStatus = table.checkStatus('idTest')
//                                ,data = checkStatus.data;
//                        layer.msg('选中了：'+ data.length + ' 个');
//                    }
//                    ,isAll: function(){ //验证是否全选
//                        var checkStatus = table.checkStatus('idTest');
//                        layer.msg(checkStatus.isAll ? '全选': '未全选')
//                    }
                };

                $('.demoTable .layui-btn').on('click', function () {
                    var type = $(this).data('type');
                    active[type] ? active[type].call(this) : '';
                });

            });

            function chengeName(type, val) {
                layer.open({
                    title: '-'
                    ,content: "清输入新名称：<input type='text' id='newName' value='" + val + "' >"
                    ,yes: function(layero, index){
                        $.ajax({
                            url: '${basePath}/data/${dataInfo.id}/changeName',
                            type: 'post',
                            dataType: 'json',
                            data: {
                                type: type,
                                value: $("#newName").val()
                            },
                            success: function (rd) {
                                if (rd.suc) {
                                    window.location.href = "${basePath}/data/${dataInfo.id}/info";
                                } else {
                                    layer.msg(rd.msg, {icon: 2});
                                }
                            }
                        });
                    }
                });

            }





        </script>


    </div>
</div>




<#include "/common/include_footer.ftl">
<#--<#include "/common/include_js.ftl">-->

</body>
</html>